HTML এর মাধ্যমে Dialog Box তৈরি করার নিয়ম

Welcome to Creationbangla-24. কেমন আছেন বন্ধুরা? আশা করি মহান আল্লাহ্ তা'য়ালার অশেষ রহমতে ভালো আছেন। আপনারা অবশ্যই Title দেখে বুঝতে পেরেছেন এই পেজে কী বিষয় নিয়ে আলোচনা করতে যাচ্ছি। তো আপনাদের জানিয়ে রাখি এটি একটি শিক্ষা বিষয়ক সাইট। এই site এ আমি নির্দিষ্ট কিছু বিষয় নিয়ে ধারাবাহিক ভাবে লিখব। আপনাদের একটি কথা না বললেই নয় যে, এই Page টি ভালোভাবে বুঝার জন্য এবং Page টি থেকে উপকৃত হওয়ার জন্য সম্পূর্ণ Page টি মনযোগ সহকারে পড়বেন। এখন এই পেজটিতে আপনাদের সাথে আলোচনা করতে যাচ্ছি "<dialog> ট্যাগ" সম্পর্কে এবং আপনাদের সাথে আছি আমি Md.Aiub তো চলুন বন্ধুরা শুরু করা যাক।


dialog tag
ওয়েবপেজে একটি dialog box তৈরি করার জন্য <dialog> ট্যাগ ব্যবহার করা হয়। সাধারণত কোনো বিষয় সম্পর্কে জরুরী তথ্য প্রদর্শনের জন্য dialog box তৈরি করা হয়। dialog box কোনো Element উপরে প্রদর্শিত হয়। তবে dialog box স্বয়ংক্রিয়ভাবে close হয়ে থাকে এবং open এট্রিবিউট ব্যবহার করে এটি open করে দিতে হয়। আপনি জরুরী মেসেজ হিসাবে যা কিছু লিখবেন তা dialog box এ প্রদর্শিত হবে। আপনি চাইলে CSS ব্যবহার করে dialog box বিভিন্নভাবে স্টাইল করতে পারবেন।

<dialog> ট্যাগ এর গঠনরীতি: <dialog> ট্যাগ এর গঠনরীতি হলো <dialog>...Given your text...</dialog>
আপনি dialog box এ যতটুকু টেক্স রাখতে চান ততোটুকু টেক্স <dialog> ও </dialog> এর মাঝে রাখতে হবে। অন্যথায় dialog box এ সেই টেক্স প্রদর্শিত হবে না। তাছাড়া <dialog> ট্যাগে Global Attributes ও Event Attributes support করে।

নিম্নে dialog box তৈরি করার জন্য কোডিং করে দেখানো হলো। আপনি চাইলে কোড বা টেক্স পরিবর্তন করে এখানেই অনুশীলন করতে পারেন এবং Run Code Button এ ক্লিক করে উপরের কোডগুলোর Output দেখতে পারেন । আবার আপনি চাইলে Copy Code Button এ ক্লিক করে কোডগুলো কপি করতে পারেন এবং তা আপনার প্রয়োজনে ব্যাবহার করতে পারেন।





Output
উপরিউক্ত Tag বিশ্লেষণ ও কাজের বর্ণনা :
  1. <!doctype html> এটাকে আসলে সম্পূর্ণ কোন Tag বলা হয় না। <!doctype html> ট্যাগ ব্যবহার করা হয় <html> ট্যাগ এর পূর্বে। যা ওয়েব ব্রাউজার কে html এর ভার্সন বলে দেয়। যাতে ওয়েব ব্রাউজার ওয়েব কন্টেন্ট গুলোর সাথে ভালো ভাবে কাজ করতে পারে। আর <!doctype html> ট্যাগ এর প্রধান কাজ হচ্ছে ওয়েব ব্রাউজার কে বলে দেওয়া যে, ওয়েব পেজটির Document type. HTML5 Standard.
  2. <html> ট্যাগ দ্বারা ওয়েব ব্রাউজারকে নির্দেশ করা হয়েছে যে, এই ওয়েব পেজটি HTML ভাষায় তৈরী।
  3. <head> ট্যাগ ওয়েবপেজ সম্পর্কিত তথ্য ধারণ করে। এখানে ওয়েবপেজের শিরোনাম রাখা হয়েছে <head> ট্যাগ এর মাঝে। তাছাড়াও <head> ট্যাগ এর মাঝেই আপনাকে Style sheet, Script, meta ট্যাগ ব্যবহার করতে হবে।
  4. <title> ট্যাগ ওয়েবপেজের শিরোনাম ধারণ করে। <title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শুরু করা হয়েছে এবং সম্পূর্ণ শিরোনামটি এই ট্যাগ এর মধ্যেই রাখতে হবে।
  5. </title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <title> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েবপেজের শিরোনাম বলে গণ্য হবে না।
  6. </head> ট্যাগ এর মাধ্যমে <head> বন্ধ করা হয়েছে।
  7. <body> ট্যাগ ওয়েবপজের মূল উপাদান ধারণ করে। আপনি ওয়েবপেজে যা প্রদর্শন করাতে চান সেই সম্পর্কিত সকল ট্যাগ <body> ট্যাগ এর মধ্যে রাখতে হবে।
  8. <h1> Tag দ্বারা ওয়েব পেজে আলোচিত বিষয়ের শিরোনাম নির্ধারণ করা হয়েছে।
  9. </h1> ট্যাগ এর মাধ্যমে ওয়েবপেজে আলোচিত বিষয়ের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <h1> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েব পেজে আলোচিত বিষয়ের শিরোনাম বলে গণ্য হবে না।
  10. <p> Tag দ্বারা ওয়েবপেজে একটি Paragraph ঘোষণা করা হয়েছে । আপনি প্যারাগ্রাফ হিসাবে যা লিখতে চান তা এই ট্যাগ এর মধ্যে রাখতে হবে। অন্যথায় প্যারাগ্রাফ হলে বিবেচিত হবে না।
  11. <dialog> ট্যাগের মাধ্যমে ওয়েবপেজে একটি dialog box তৈরি করা হয়েছে। Open Attribute ব্যবহার করে ডায়ালগ বক্সটি open করে দেওয়া হয়েছে। যদি Open Attribute ব্যবহার না করেন তাহলে ডায়ালগ বক্সটি open হবে না, close হয়ে থাকবে।
  12. </dialog> Tag এর মাধ্যমে <dialog> ট্যাগ বন্ধ করা হয়েছে।
  13. </p> Tag এর মাধ্যমে <p> ট্যাগ বন্ধ করা হয়েছে।
  14. </body> Tag এর মাধ্যমে <body> ট্যাগ বন্ধ করা হয়েছে।
  15. </html> Tag Tag এর মাধ্যমে <html> ট্যাগ বন্ধ করা হয়েছে। অর্থাৎ Html ভাষায় তৈরিকৃত ওয়েজপেজটি শেষ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে তা Html ভাষায় তৈরিকৃত ওয়েজপেজটির কোনো Document বলে বিবেচিত হবে না।

ًপ্রিয় পাঠক বন্ধুরা,
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "<div> ট্যাগ" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...


Post a Comment

Previous Post Next Post